<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>AutoComplete 自动完成</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-select{
	margin-left: 20px;
}

</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本使用</a-divider><!-- =============================================================== -->
	<p class="desc">基本使用。通过 options 设置自动完成的数据源</p>
	<a-auto-complete v-model:value="value1" :options="options1" style="width: 200px" placeholder="input here" @select="onSelect1" @search="onSearch1"></a-auto-complete>
	
	<a-divider class="a-divi" orientation="left">自定义输入组件</a-divider><!-- =============================================================== -->
	<p class="desc">自定义输入组件。</p>
	<a-auto-complete v-model:value="value2" :options="options2" style="width: 200px" @search="onSearch2" @select="onSelect1">
		<a-textarea placeholder="input here" class="custom" style="height: 50px" @keypress="handleKeyPress2"></a-textarea>
	</a-auto-complete>
	
	<a-divider class="a-divi" orientation="left">查询模式 - 确定类目</a-divider><!-- =============================================================== -->
	<p class="desc">查询模式 - 确定类目。（感觉不会这么用）</p>
	<div class="certain-category-search-wrapper" style="width: 250px">
		<a-auto-complete v-model:value="value3" :options="options3" class="certain-category-search"
			popup-class-name="certain-category-search-dropdown" :dropdown-match-select-width="500" style="width: 250px">
			<template #option="item">
				<template v-if="item.options">
					<span>
						{{ item.value }}
						<a style="float: right" href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">more</a>
					</span>
				</template>
				<template v-else-if="item.value === 'all'">
					<a href="https://www.google.com/search?q=ant-design-vue" target="_blank" rel="noopener noreferrer">View all results</a>
				</template>
				<template v-else>
					<div style="display: flex; justify-content: space-between">
						{{ item.value }}
						<span><user-outlined></user-outlined>{{ item.count }}</span>
					</div>
				</template>
			</template>
			<a-input-search placeholder="input here" size="large"></a-input-search>
		</a-auto-complete>
	</div>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 AutoComplete 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-auto-complete v-model:value="value4" :options="options4" style="width: 200px" placeholder="input here"
			status="error" @select="onSelect1" @search="onSearch4"></a-auto-complete>
		<a-auto-complete v-model:value="value42" :options="options42" style="width: 200px" placeholder="input here"
			status="warning" allow-clear @select="onSelect1" @search="onSearch42" @clear="onClear42"></a-auto-complete>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义清除按钮</a-divider><!-- =============================================================== -->
	<p class="desc">自定义清除按钮。</p>
	<a-auto-complete v-model:value="value5" :options="options5" style="width: 200px" placeholder="Clearable"
		:allow-clear="true" @select="onSelect1" @search="onSearch5"></a-auto-complete>
	<br />
	<br />
	<a-auto-complete v-model:value="value52" :options="options52" style="width: 200px" placeholder="Customized clear icon"
		:allow-clear="true" @select="onSelect1" @search="onSearch52">
		<template #clearIcon>
			<close-outlined></close-outlined>
		</template>
	</a-auto-complete>
	
	<a-divider class="a-divi" orientation="left">自定义选项</a-divider><!-- =============================================================== -->
	<p class="desc">3.0 以上版本，可以传递 v-slot:option 来自定义 Option。</p>
	<a-auto-complete v-model:value="value6" style="width: 200px" placeholder="input here" :options="options6"
		@search="onSearch6">
		<template #option="{ value: val }">
			{{ val.split('@')[0] }} @
			<span style="font-weight: bold">{{ val.split('@')[1] }}</span>
		</template>
	</a-auto-complete>
	
	<a-divider class="a-divi" orientation="left">不区分大小写</a-divider><!-- =============================================================== -->
	<p class="desc">不区分大小写的 AutoComplete。（带过滤功能，这个比较好用）</p>
	<a-auto-complete v-model:value="value7" :options="options7" style="width: 200px" placeholder="input here"
		:filter-option="filterOption7"></a-auto-complete>
	
	<a-divider class="a-divi" orientation="left">查询模式 - 不确定类目</a-divider><!-- =============================================================== -->
	<p class="desc">查询模式 - 不确定类目。</p>
	<div class="global-search-wrapper" style="width: 300px">
		<a-auto-complete v-model:value="value8" :dropdown-match-select-width="252" style="width: 300px" :options="options8"
			@select="onSelect1" @search="onSearch8">
			<template #option="item">
				<div style="display: flex; justify-content: space-between">
					<span>
						Found {{ item.query }} on
						<a :href="`https://s.taobao.com/search?q=${item.query}`" target="_blank" rel="noopener noreferrer">
							{{ item.category }}
						</a>
					</span>
					<span>{{ item.count }} results</span>
				</div>
			</template>
			<a-input-search size="large" placeholder="input here" enter-button></a-input-search>
		</a-auto-complete>
	</div>
	
	<a-divider class="a-divi" orientation="left">无边框</a-divider><!-- =============================================================== -->
	<p class="desc">没有边框。</p>
	<a-auto-complete v-model:value="value9" :options="options9" style="width: 200px" placeholder="border less"
		:bordered="false" @select="onSelect1" @search="onSearch9"></a-auto-complete>
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		value1: '',
		options1: [],
		
		value2: '',
		options2: [],
		
		value3: '',
		options3: [
			{
				value: 'Libraries',
				options: [
					{value: 'AntDesignVue',count: 10000,},
					{value: 'AntDesignVue UI',count: 10600,},
				],
			},
			{
				value: 'Solutions',
				options: [
					{value: 'AntDesignVue UI FAQ',count: 60100,},
					{value: 'AntDesignVue FAQ',count: 30010,},
				],
			},
			{
				value: 'Articles',
				options: [
					{value: 'AntDesignVue design language',count: 100000,},
				],
			},
			{value: 'all',},
		],
		
		value4: '',
		options4: [],
		value42: '',
		options42: [],
		
		value5: '',
		options5: [],
		value52: '',
		options52: [],
		
		value6: '',
		options6: [],
		
		value7: '',
		options7: [
			{ value: 'Burns Bay Road' },
			{ value: 'Downing Street' },
			{ value: 'Wall Street' },
			{ value: 'Abc中文' },
			{ value: 'Def汉字' },
		],
		
		value8: '',
		options8: [],
		
		value9: '',
		options9: [],
	}
},
methods:{
	mockVal(str, repeat){
		return {value: str.repeat(repeat)};
	},
	onSelect1(value){
		console.log('onSelect', value);
	},
	onSearch1(searchText){
		console.log('onSearch1');
		this.options1 = !searchText ? [] : [this.mockVal(searchText, 1), this.mockVal(searchText, 2), this.mockVal(searchText, 3),];
	},
	
	onSearch2(value){
		console.log('onSearch2');
		this.options2 = !value ? [] : [{value}, {value: value + value}, {value: value + value + value},];
	},
	handleKeyPress2(ev){
		console.log('handleKeyPress2', ev);
	},
	
	onSearch4(value){
		console.log('onSearch4');
		this.options4 = !value ? [] : [{value}, {value: value + value}, {value: value + value + value},];
	},
	onSearch42(value){
		console.log('onSearch42');
		this.options42 = !value ? [] : [{value}, {value: value + value}, {value: value + value + value},];
	},
	onClear42(){
		console.log('onClear42');
	},
	
	onSearch5(value){
		console.log('onSearch5');
		this.options5 = !value ? [] : [{value}, {value: value + value}, {value: value + value + value},];
	},
	onSearch52(value){
		console.log('onSearch52');
		this.options52 = !value ? [] : [{value}, {value: value + value}, {value: value + value + value},];
	},
	
	onSearch6(val){
		console.log('onSearch6');
		let res = [];
		if (!val || val.indexOf('@') >= 0) {
			res = [];
		} else {
			res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({ value: `${val}@${domain}` }));
		}
		this.options6 = res;
	},
	
	filterOption7(input, option){
		// console.log(input.toUpperCase());
		// console.log(option);
		return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
	},
	
	getRandomInt(max, min=0){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	},
	searchResult(query){
		let arr = new Array(this.getRandomInt(5)).join('.').split('.').map((_item, idx) => ({
			query,
			category: `${query}${idx}`,
			value: `${query}${idx}`,
			count: this.getRandomInt(200, 100),
		}));
		// console.log(arr);
		return arr;
	},
	onSearch8(val){
		// console.log(this.getRandomInt(9, 8));
		// this.searchResult(val);
		this.options8 = val ? this.searchResult(val) : [];
	},
	
	onSearch9(value){
		console.log('onSearch9');
		this.options9 = !value ? [] : [{value}, {value: value + value}, {value: value + value + value},];
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
